<template>
  <a-drawer :visible="drawerVisible"  :title="title" :width="width" :maskClosable='maskClosable' ref="baseDrawer" @close="close" :destroyOnClose="true">
    <slot></slot>
    <div class="drawer-footer" v-if="showFooter">

      <template v-if="customFooter">
        <slot name="drawerFooter"></slot>
      </template>
      <template v-if="!customFooter">
        <a-button type="default" @click="close" style="margin-left: 3px;">取消</a-button>&nbsp;
        <a-button type="primary" @click="handleSubmit" :loading="saving">{{okText}}</a-button>
      </template>
    </div>
  </a-drawer>
</template>
<script>
  export default {
    name: 'fDrawer',
    props: {
      title: {
        type: String,
        default: ''
      },
      showFooter: {
        type: Boolean,
        default: true
      },
      maskClosable:{
        type: Boolean,
        default: true
      },
      okText:{
        type: String,
        default: '确定'
      },
      width: {
        type: [Number, String],
        default: 800
      }
    },
    data() {
      return {
        customFooter: false,
        drawerVisible: false,
        saving: false
      }
    },
    methods: {
      show() {
        this.drawerVisible = true
        this.saving=false;
        this.$emit('visibleChange', true)
      },
      close() {
        this.drawerVisible = false
        this.$emit('visibleChange', false)
      },
      beforeSubmit(){
        this.saving=true;
      },
      handleSubmit() {
        this.$emit('submit', this.close,this.beforeSubmit)
      }
    },
    computed: {},
    created() {
      let drawerFooter = this.$slots['drawerFooter']
      if (drawerFooter) {
        this.customFooter = true
      }
    }
  }
</script>
